<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      border: 1px solid #000;
    }
    #mainDiv{
      width: 800px;
      height:600px;
      margin: auto;
    }
    #menuUL{
      display: flex;
    }

    #menuUL li{
      list-style: none;/*去掉无序列表的圆点*/
      background-color: bisque;
      width: 150px;
      height: 30px;
      text-align: center;
      font-size: 20px;
      cursor: pointer;/*悬停时鼠标样式*/
      position: relative;
    }

    #menuUL li:hover{
      background-color: yellow;
      font-weight: bold;
    }

    #menuUL li div{
       width: 150px;
       height: 0px;
       background-color: yellow;
       overflow-y: hidden;
      left:0px;
      top:30px;
      transition: all .3s;
    }

    #menuUL li:hover div{
       height: 200px;
    }
  </style>
</head>
<body>
    <div id="mainDiv">
      <ul id="menuUL">
        <li>新闻
          <div>
            菜农无法运出<br>
            俄乌开战<br>
            反对美台来往
          </div>
        </li>
        <li>财经
          <div>
            不超过5亿融资<br>
            房地产热度下降<br>
            成都集团签订协议
          </div>
        </li>
        <li>体育
          <div>
            库里复出战掘金<br>
            男足出路在哪儿<br>
            谷爱凌夺冠
          </div>
        </li>
      </ul>
      asdfasdfsadfasdfasdf
    </div>

</body>
</html>
